<template>
	<view class="detail">
		<view>
			<swiper class="imgsBanner_swiper" :current='currentIndex' @change='changCurrent' circular="true">
				<swiper-item v-for="(item,index) in ware.images" :key='index'>
					<image :src="imgRemote+item"></image>
				</swiper-item>
			</swiper>
			<!-- 图片位置 -->
			<view class="imgLength" v-if="ware.images">{{(currentIndex+1)+'/'+(ware.images.length)}}</view>
			<view class="active-good" v-if="times>0">
				<image :src="imgRemote+'/active_bg.png'"
					style="position:absolute;height:120rpx;left:0;z-index:-1;width: 100%;">
				</image>
				<view>
					<view class="bold">
						<text class="fs-14">秒杀价</text>
						<text class="fs-14"> ￥</text>
						<text style="font-size:36rpx;">{{ware.sku[activeTab].activity_price}}</text> <text
							class="del">￥{{ware.sku[activeTab].market_price}}</text>
					</view>
					<view>限购{{ware.sku[activeTab].activity_buy}}份</view>
				</view>
				<view class="remain-time red-font">
					<view class="fs-13 center">{{start?'距结束还剩':'距开始'}}</view>
					<view style="" class="fs-11 center">
						<text v-if="day>0">{{day}}天</text>
						<text>{{hours}}</text>时
						<text>{{minus}}</text>分
						<text>{{second}}</text>秒
					</view>
				</view>
			</view>
			<view class="white_b">
				<view class="desc_box">
					<view class="fs-18 bold title">{{ware.name}}</view>
					<view class="fs-11 gray_font">
						<!-- <text style="margin-right: 20rpx;" v-if="ware.x_num">每日限购{{ware.x_num}}</text> -->
						<text>已售{{ware.xl}}</text>
					</view>
				</view>

				<view class="flex_left_right">
					<view class="fs-13 gray_font desc">
						<text v-if="ware.desc">{{ware.desc}}</text>
					</view>

				</view>
				<view class="price flex_left_right">
					<view>
						<!-- <view v-if="ware.sku[0].market_price!='***'" class="gray_font line_through" style="font-size: 22rpx;">
							¥{{ware.sku[0].cost_price}}</view> -->
						<view v-if="start==false">
							<text class="fs-18  pink bold">￥</text>
							<text class="fs-23 pink bold">{{ware.sku[0].market_price}}</text>
							<text class="bold">/{{ware.sku[0].unit}}</text>
							<text style="margin-left: 15rpx;" class="fs-13 gray_font" v-if="ware&&ware.sku&&ware.sku[0].stock>=0">库存{{ware.sku[0].stock}}</text>
						</view>

					</view>

					<view class="share-info align_center" @click="openShare">
						<text class="iconfont bold" style="margin-top: 2rpx;">&#xe6a3;</text>
						<text class="fs-11">分享</text>
					</view>
				</view>
			</view>
		</view>
		<view class="delivery white_b" v-if="explain">
			<view class="align_center" v-if="explain.service_bottom">
				<text class="iconfont iconfuwu1" style="color:#009B44;margin-right: 22rpx;font-size: 62rpx;"></text>
				<text class="fs-13">{{explain.service_bottom}}</text>
			</view>

			<view style="border-bottom: 1px solid #eee;" v-if="explain.service_bottom&&explain.service_top"></view>
			<view class=" align_center" v-if="explain.service_top">
				<image src="../../static/img/car.png" class="img-width"></image>
				<text class="fs-13">{{explain.service_top}}</text>
			</view>
		</view>
		<view>
			<view class="flex-j-c white_b">
				<my-s-tabs effect slot-title class="mp_tab_width" lineColor="#f44b44" activeColor="#f44b44"
					v-model="activeTab" color="#999" lineScale="0.3">
					<my-s-tab v-for="(item,index) of tabs" :key="index">{{item.title}}</my-s-tab>
				</my-s-tabs>
			</view>
			<view class="white_b padding-15">
				<block v-if="activeTab==0">
					<rich-text :nodes="ware.content" v-if="ware.content"></rich-text>
					<view v-else style="padding: 30rpx;" class="center">
						<image :src="none" mode="widthFix" class="w-60"></image>
						<view class="center gray_font fs-14">暂时没有内容哦~</view>
					</view>
				</block>
				<view v-else>
					<view v-if="evaluates.length">
						<view v-for="item in evaluates" :key="item.id"
							style="border-bottom: 1px solid #eee;padding: 30rpx 0;">

							<view class="align_center">
								<image :src="item.avatar?item.avatar:'/static/img/avatar.png'"
									style="width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 50%;">
								</image>
								<view class="fs-13 flex-left-right flex-full">
									<view>
										<view>{{item.user.nickname?item.user.nickname:'匿名用户'}}</view>
										<uni-rate :value="item.level" :readonly="true" size="20" />
									</view>
									<text>{{$fomartDate(item.createtime).substring(0,10)}}</text>
								</view>
							</view>
							<view style="margin-top: 30rpx;">
								<view>
									{{item.content}}
								</view>
								<image :src="sitem" mode="" v-for="(sitem,sindex) in item.img" :key="sindex"
									@click="toPreImg(item.img,sindex)"
									style="width: 200rpx;height: 200rpx;margin:20rpx 20rpx 0 0;border-radius: 10rpx;">
								</image>
							</view>
						</view>
					</view>
					<view v-else style="padding: 30rpx;" class="center">
						<image :src="none" mode="widthFix" class="w-60"></image>
						<view class="center gray_font fs-14">暂时没有内容哦~</view>
					</view>
				</view>
			</view>

		</view>

		<!-- <view class="sh_box">
			<rich-text :nodes="explain.sh" v-if="explain"></rich-text>
		</view> -->

		<view style="height: 100rpx;" />
		<view class="addcart" :class="[system=='ios'?'pm':'']">
			<view class="flex_left_right">
				<view class="flex-left-right flex-full">
					<navigator open-type="switchTab" url="../tabar/index">
						<view class="align_center flex-column">
							<text class="iconfont iconshouye2-copy"></text>
							<text class="fs-13">首页</text>
						</view>
					</navigator>
					<!-- <button open-type="contact" style="margin: 0;">
						<view class="align_center flex-column">
							<text class="iconfont iconkefu-copy"></text>
							<text class="fs-13">客服</text>
						</view>
					</button> -->
					<view class="align_center flex-column" @click="shopcartPage">
						<text class="iconfont icongouwuche21-copy"></text>
						<text class="fs-13">购物车</text>
						<text class="cart-count" v-if="cartCount>0">{{cartCount}}</text>
					</view>
					<view class="align_center flex-column" @click="collecting">
						<text class="iconfont " :class="collected?'icon-shoucang1':'icon-shoucang'"
							:style="{color:collected?'#FF7133':''}"></text>
						<text class="fs-13" style="margin-top: 5rpx;">收藏</text>

					</view>
				</view>

				<view class="submit ">
					<!-- <my-n-stepper val="12" ></my-n-steper> -->
					<view class="add buy fs-15" @click="buyGood(1)">
						加入购物车
					</view>
				</view>
				<view class="submit">
					<!-- <my-n-stepper val="12" ></my-n-steper> -->
					<view class="add ac fs-15" @click="buyGood(2)">
						立即购买
					</view>
				</view>
			</view>

		</view>
		<uni-popup ref="popup" type="bottom" :maskShow="maskShow">
			<view class="white_b share-option">
				<view class="flex_left_right select">
					<button open-type="share">
						<view class="center">
							<text class="iconfont iconweixin1"></text>
							<view>分享好友</view>
						</view>
					</button>

					<view @click="playBill" class="center">
						<text class="iconfont iconpengyouquan"></text>
						<view>生成海报</view>
					</view>
				</view>
				<view @click="cancelShare" class="cancel fs-15">取消</view>
			</view>
		</uni-popup>
		<uni-popup ref="poster">
			<view class="share-friend-info r-5">
				<view class="right close-share"><text @click="setClose()" class="iconfont iconguanbi"></text>
				</view>
				<view class="white_b detail r-5">
					<view class="good-img align_center">
						<image :src="imgRemote+ware.main_image" mode="widthFix">
						</image>
					</view>
					<view class="product">

						<view class="flex about-qr">
							<view class="price-qr">
								<view class="bold name two-line">{{ware.name}}</view>
								<view class="red-font rmb">
									<text class="fs-11">￥</text>
									<text class="fs-15 bold">{{ware.sku[0].market_price}}</text>

								</view>
								<view class="fs-11 " style="margin-top:30rpx;">
									<text class="mp">长按识别小程序</text>
								</view>
							</view>

							<image class="qr-code" :src="mp" mode="aspectFit"></image>

						</view>
					</view>
				</view>

			</view>
			<view class="save-photo" @click="canvasToTempFilePaths">
				保存图片
			</view>

		</uni-popup>
		<uni-popup ref="addcart" type="bottom">
			<my-addcart :type='type' :ware="ware" @close="close" :start="start"></my-addcart>
		</uni-popup>

		<l-painter :board="base" ref="painter" v-show="false" />


		<!-- <u-popup v-model="psShow" mode="center" border-radius="14" :closeable="true" close-icon-pos="top-right">
			<view class="b_msg_box">
				<view class="b_msg_title">温馨提示</view>
				<view class="b_msg_msg">{{psMsg}}</view>
				<view class="b_msg_btn" @click="psShow=false">确定</view>
			</view>
		</u-popup> -->


	</view>
</template>
<script>
	import lPainter from '@/uni_modules/lime-painter/components/lime-painter/'
	const app = getApp().globalData;
	const {
		imgRemote
	} = app;
	export default {
		components: {
			lPainter
		},
		data() {
			return {
				collected: 0,
				activeTab: 0,
				times: '',
				maskShow: true,
				showcart: false,
				path: '',
				cartCount: '',
				comentTotal: 0,
				base: {
					width: '540rpx',
					height: '800rpx',
					views: [{
							type: 'view',
							css: {
								background: '#FF7133',
								width: '540rpx',
								height: '800rpx',
							}
						},
						{
							type: 'view',
							css: {
								left: '40rpx',
								top: '60rpx',
								background: '#fff',
								radius: '10rpx',
								width: '460rpx',
								height: '680rpx',
								shadow: '0 20rpx 48rpx rgba(0,0,0,.05)'
							}
						},
						{
							type: 'image',
							src: '',
							css: {
								left: '72rpx',
								top: '86rpx',
								width: '400rpx',
								height: '400rpx',
								radius: '10rpx'
							}

						},
						{
							type: 'text',
							text: '1212',
							maxLines: 2,
							css: {
								fontWeight: 'bold',
								left: '72rpx',
								top: '500rpx',
								width: '260rpx',

							}
						},
						{
							type: 'text',
							text: '',
							css: {
								color: '#F01D1D',
								left: '72rpx',
								top: '550rpx',
								
							}
						},
						{
							type: 'view',
							css: {
								left: '40rpx',
								top: '648rpx',
								// background: '#E1FFE3',
								radius: '10rpx',
								width: '245rpx',
								height: '40rpx',
								radius: '0 20rpx 20rpx 0'

							}
						},
						{
							type: 'text',
							text: '长按识别小程序',
							css: {
								color: '#FF7133',
								left: '72rpx',
								top: '610rpx',
							}
						},
						{
							type: 'image',
							src: '',
							css: {
								left: '330rpx',
								top: '500rpx',
								width: '150rpx',
								height: '150rpx'
							}

						}
					]
				},
				imgRemote: imgRemote,
				ware: [],

				explain: '',
				currentIndex: 0, //当前默认选中,
				id: '',
				day: '',
				hours: '',
				minus: '',
				second: '',
				start: false,
				tabs: [{
					title: '商品详情'
				}, {
					title: '评价'
				}],
				page: 1,
				limit: 10,
				evaluates: [],
				system: '',
				type: '',
				remShow: false,
				none: '',

				psShow: false,
				psMsg: '',
				mp:''

			};
		},
		onShow() {
			this.isCollect();
			this.system = uni.getSystemInfoSync().platform;
            this.getCount();
			//this.getShopPs();

		},
		onLoad(e) {
			this.none = this.$imgUrl + 'assets/img/no_content.png';
			this.mp=this.$imgUrl+'assets/img/mp.jpg';
			this.base.views[7].src=this.mp;
			console.log(e);
			let {
				id
			} = e;

			if (id) {
				this.goodDetail(id);
				this.id = e.id;

			}
			let seller_id = '';
			if (e.seller_id) {
				seller_id = e.seller_id;
			}

			if (e.scene) {
				let scene = decodeURIComponent(e.scene);
				console.log(scene);
				if (scene != 'undefined') {
					scene = scene.split(',');
					console.log(scene);
					this.goodDetail(scene[0]);
					this.id = scene[0];
					seller_id = scene[1];

				};

			}

			this.getEvaluate();

			console.log(seller_id);
			uni.setStorageSync('seller_id', seller_id)

			
			if (uni.getStorageSync('userToken')) {
				this.goodLike(id);
			}


			let _ = this;
			_.$get(_.$api.userInfo, {}, (res) => {
				let {
					data
				} = res;
				if (data.code == 1) {
					_.userInfo = data.data;
				}
			})
		},
		methods: {
			getShopPs() {
				let _ = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_.$get(_.$api.shopPs, {
							lng: res.longitude,
							lat: res.latitude
						}, ress => {
							_.psShow = ress.data.data.status;
							_.psMsg = ress.data.data.msg;
						})

					},
					fail(error) {
						_.$get(_.$api.shopPs, {
							lng: '',
							lat: ''
						}, ress => {
							_.psShow = ress.data.data.status;
							_.psMsg = ress.data.data.msg;
						})
						console.log(error);
					}
				})
			},
			setClose() {
				console.log(1);
				this.$refs.poster.close();
			},
			toPreImg(urls, index) {

				uni.previewImage({
					urls: urls,
					current: index,
					fail(err) {
						console.log(err);
					}
				})
			},
			format(arg) {
				return parseInt(arg) > 9 ? parseInt(arg) : '0' + parseInt(arg)
			},
			getActiveTime() {
				let times = this.times;
				setInterval(() => {
						times--;
						let day = Math.floor(times / 3600 / 24);
						let hours = Math.floor(times / 3600 % 24);

						let minus = Math.floor(times / 60 % 60);
						let second = Math.floor(times % 60);
						this.day = this.format(day)
						this.hours = this.format(hours);
						this.minus = this.format(minus);
						this.second = this.format(second);

					},
					1000)
			},
			canvasToTempFilePaths() {

				setTimeout(() => {
					this.canvasToTempFilePath();
				}, 500);
			},
			canvasToTempFilePath() {

				const painter = this.$refs.painter;
				painter.render(this.base);
				// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
				painter.canvasToTempFilePath().then(res => {
					this.path = res.tempFilePath;
					uni.saveImageToPhotosAlbum({
						filePath: this.path,
						success(res) {
							uni.showModal({
								title: '保存成功',
								content: '图片成功保存到相册了，快去分享朋友圈吧',
								showCancel: false,
								confirmText: '好的',
								confirmColor: '#818FFB'
							})
						}
					})
				})
			},


			goodDetail(id) {
				this.$get(this.$api.goodDetail, {
					id: id
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {

						if (data.data.content) {
							data.data.content = this.$formatRichText(data.data.content).replace(/src="\//g,
								'src="' + getApp().globalData
								.imgRemote + '/');
						}



						this.ware = data.data;
						this.base.views[2].src = this.imgRemote + this.ware.main_image;
						this.base.views[3].text = this.ware.name;
						this.base.views[4].text = '￥' + this.ware.sku[0].market_price;
						this.base.views[7].src = data.data.sqr;

						let time = (new Date() - 0) / 1000;
						if (data.data.hd) {
							this.start = time - data.data.hd.starttime > 0 ? true : false;
							this.times = this.start ? data.data.hd.endtime - time : data.data.hd.starttime - time;
							this.getActiveTime();
						}
						

					}
				})
				this.$get(this.$api.mainSevice, {
					type: 2
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {

						if (data.data.sh) {

							data.data.sh = this.$formatRichText(data.data.sh).replace(/src="\//g,
								'src="' + getApp().globalData
								.imgRemote + '/');

						}

						this.explain = data.data;

					}
				})
			},
			changCurrent(e) {
				this.currentIndex = e.target.current
			},
			openShare() {
				this.$refs.popup.open();
			},
			cancelShare() {
				this.$refs.popup.close();
			},
			playBill() {
				this.cancelShare();
				this.$refs.poster.open();
			},
			buyGood(type) {
				this.type = type;
				this.$needLogin(() => {
					this.$refs.addcart.open()
				},3,'/pages/index/shopdetail?id='+this.id)
			},
			close() {
				this.$refs.addcart.close();
				this.getCount();
			},
			getCount() {
				this.$get(this.$api.cart_count, {admin_id:this.ware.admin_id}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.cartCount = data.data;
					}
				})
			},
			goodLike(id) {
				this.$get(this.$api.goodsJoin_like, {
					token: uni.getStorageSync('userToken'),
					goods_id: id
				}, () => {})
			},
			shopcartPage() {
				this.$needLogin(() => {
					uni.navigateTo({
						url: '/pages/tabar/shopcart?admin_id='+this.ware.admin_id
					})
				},3,'/pages/index/shopdetail?id='+this.id)
			},
			getEvaluate() {
				let params = {
					token: uni.getStorageSync('userToken'),
					goods_id: this.id,
					page: this.page,
					limit: this.limit
				}
				this.$get(this.$api.evaluateList, params, (res) => {
					this.tabs[1].title = '评论(' + res.data.total + ')';
					this.evaluates = [...this.evaluates, ...res.data.list];
				})
			},
			collecting() {
				this.$needLogin(() => {
					this.isCollect();
					if (this.collected) {
						this.$get(this.$api.cDel, {
							id: this.id
						}, (res) => {
							this.collected = 0;
							this.$Toast('取消收藏');
						})
					} else {
						this.$get(this.$api.cAdd, {
							id: this.id
						}, (res) => {
							this.collected = 2;
							this.$Toast('收藏成功');
						})

					}
				},3,'/pages/index/shopdetail?id='+this.id)
			},
			isCollect() {
				this.$get(this.$api.cIs, {
					id: this.id
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.collected = data.data;
					}
				});

			},
			getEvaluateList() {
				let params = {
					goods_id: this.id,
					page: this.page,
					limit: 10
				};
				this.$get(this.$api.eList, params, (res) => {
					this.list = this.list.concat(res.data.data)
				})
			}
		},

		onShareAppMessage() {

			return {
				title: this.ware.share_text ? this.ware.share_text : this.ware.name,
				path: '/pages/index/shopdetail?id=' + this.id,
				imageUrl: this.ware.share_img ? this.imgRemote + this.ware.share_img : this.imgRemote + this.ware.images[0]
			}

		},
		onShareTimeline() {
			return {
				title: this.ware.share_text ? this.ware.share_text : this.ware.name,
				path: '/pages/index/shopdetail?id=' + this.id,
				imageUrl: this.ware.share_img ? this.imgRemote + this.ware.share_img : this.imgRemote + this.ware.images[0]
			}
		},
		onReachBottom() {
			this.page++;
			console.log(this.page);
			this.getEvaluate()
		}
	}
</script>
<style scoped lang="scss">
	.pm {
		padding-bottom: 45rpx;
	}

	.remain-time {
		padding-right: 10rpx;
	}

	.cart-count {
		margin: -5rpx 0 0 36rpx;
		text-align: center;
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 14rpx;
		font-size: bold;
		border-radius: 50%;
		background: #FF7133;
		color: white;
		// border: 1px solid orange;
	}

	.imgLength {
		position: absolute;
		top: 660rpx;
		right: 0rpx;
		background: rgba(0, 0, 0, 0.2);
		padding: 0 12rpx;
		line-height: 32rpx;
		font-size: 22rpx;
		border-radius: 15rpx 0 0 15rpx;
		color: #fff;
	}

	.imgsBanner_swiper {
		width: 750rpx;
		height: 750rpx;

		swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.detail .title {
		padding: 13rpx 32rpx 20rpx 30rpx;
	}

	.share-info {
		color: #F01D1D;
		background: #FFE2E2;
		width: 122rpx;
		height: 34rpx;
		line-height: 34rpx;
		border-radius: 17rpx 0 0 17rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.detail {
		.desc {
			padding-left: 30rpx;
		}

		.price {
			padding: 29rpx 30rpx 25rpx;
		}

		.delivery {
			.img-width {
				width: 60rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			margin: 16rpx 0;
			padding: 0 30rpx;
			color: #333;
			line-height: 92rpx;

			.service-bottom {
				border-top: 1px solid #eee;
			}
		}

		.more-info {
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.pink {
		color: #F01D1D;
	}

	.line-bottom {
		width: 130rpx;
		background-color: #57B127;
		height: 8rpx;
		border-radius: 4rpx;
		position: absolute;
		margin-top: 50rpx;
		opacity: 0.4;
	}

	.addcart {

		position: fixed;
		bottom: 0;
		background: white;
		width: 100%;

		&>view {
			height: 98rpx;
			padding: 0 30rpx;

			.iconfont {
				font-size: 40rpx;
			}
		}

		.submit {
			width: 200rpx;
			height: 78rpx;
			margin-left: 25rpx;
		}
	}

	.add {
		background: #f44b44;
		text-align: center;
		line-height: 78rpx;
		color: white;
	}

	.buy {
		background: #F3CB3D;
	}

	.add {
		border-radius: 39rpx;
	}

	.share-option {
		button {
			background: none;
			margin: 0;
			padding: 0;
			border: none;
			font-size: 30rpx;
			line-height: normal;

			&::after {
				border: none;
			}
		}

		.select {
			padding: 40rpx 140rpx;

			.iconfont {
				font-size: 100rpx;
				color: #1677fe;
				margin-bottom: 8rpx;
				display: block;
			}
		}


		.cancel {
			padding: 33rpx 0;
			text-align: center;
			border-top: 1px solid #eee;
		}
	}

	.share-friend-info {
		background: $m-c;
		width: 540rpx;
		margin: -108rpx auto 0;
		padding-bottom: 1rpx;

		.poster-back {
			width: 540rpx;
			height: 850rpx;
			position: absolute;
			z-index: -1;

			left: 0;

			image {
				width: inherit;
				height: inherit;
				border-radius: 10rpx;
			}
		}

		.close-share {

			height: 60rpx;
			line-height: 60rpx;

			text {
				font-size: 40rpx;
				color: white;
			}
		}

		.detail {
			box-shadow: 2rpx 0 8rpx rgba(0, 0%, 20%, 0.15);
			margin: 0rpx 42rpx 62rpx;
			padding-bottom: 30rpx;
		}

		.product {
			padding-top: 20rpx;

			.name {
				margin: 0 29rpx;

				text-align: left;
			}

		}

		.good-img {

			border-bottom: 1px solid #eee;
			justify-content: center;

			image {
				width: 400rpx;
				height: 234rpx;
				margin: 25rpx 0;
				border-radius: 10rpx;
			}
		}

		.about-qr {
			justify-content: space-between;
			text-align: left;

			.qr-code {
				width: 150rpx;
				height: 150rpx;
				margin-right: 28rpx;
			}

			.price-qr {

				display: flex;
				flex-direction: column;
				width: 60%;

				.rmb {
					padding-left: 28rpx;
				}

				.mp {
					margin-top: 30rpx;
					// background: #E1FFE3;
					color: $m-c;
					padding: 7rpx 18rpx 8rpx 28rpx;
					border-radius: 0 20rpx 20rpx 0;
				}

			}
		}
	}

	.save-photo {
		width: 460rpx;
		height: 74rpx;
		margin: 30rpx auto 0;
		text-align: center;
		line-height: 74rpx;
		color: white;
		background: $m-c;
		border-radius: 37rpx;
	}

	.active-good {
		display: flex;
		/* background: linear-gradient(#F82381, #FF0B5C); */
		color: white;
		justify-content: space-between;
		height: 120rpx;
		padding: 0 0 0 30rpx;
		align-items: center;
	}

	.active-good .del {
		font-size: 22rpx;
		text-decoration: line-through;
		color: #FED1E3;
	}

	.active-good .end {
		color: #D58D5D;

	}

	.detail .mp_tab_width {
		my-s-tabs {
			width: 100px;
		}
	}

	.detail /deep/ .s-tab-nav {
		padding: 0 50rpx;
	}

	.z_box {
		box-sizing: border-box;
		padding: 20rpx 0rpx;
		background-color: white;
		margin: 20rpx 0;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.ban_box {
		background-color: #F5F5F5;
		font-size: 30rpx;
		color: #666666;
		box-sizing: border-box;
		padding: 10rpx 8rpx;
		border-radius: 15rpx;
	}

	.ban_left {
		margin-right: 20rpx;
	}

	.ban_bt {
		margin-bottom: 20rpx;
	}

	.black {
		color: black;
		//margin: 0 5rpx;
		font-weight: bold;
	}

	.xian {
		width: 1rpx;
		background-color: #D5D5D5;
		height: 90rpx;
		margin: 0 5rpx;
	}

	.desc_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20rpx 0 0;
	}

	.sh_box {
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: white;

		image {
			max-width: 100%;
		}
	}

	//  .detail /deep/ .s-tabs .s-tab-line{width:60rpx!important;}
</style>